<!-- AnimeIndexCard.vue -->
<template>
  <div
    class="anime-index-card"
    :style="cardStyle"
  >
    <div class="card-bg-image" :style="bgImageStyle" v-if="bgImage"></div>
    <div class="card-overlay"></div>

    <div class="card-content">
      <div class="card-header">
        <h3>{{ title }}</h3>
        <span class="more-icon">></span>
      </div>

      <div class="stats-container">
        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-label">追番人数</div>
            <div class="stat-value">{{ followers }}</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">最高评分</div>
            <div class="stat-value">{{ highestRating }}</div>
          </div>
        </div>

        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-label">更新时间</div>
            <div class="stat-value">{{ updateTime }}</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">播放数量</div>
            <div class="stat-value">{{ playCount }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '番剧索引'
  },
  followers: {
    type: String,
    default: '--'
  },
  highestRating: {
    type: String,
    default: '--'
  },
  updateTime: {
    type: String,
    default: '--'
  },
  playCount: {
    type: String,
    default: '--'
  },
  bgColor: {
    type: String,
    default: '#fff'
  },
  gradient: {
    type: String,
    default: 'linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%)'
  },
  bgImage: {
    type: String,
    default: ''
  },
  bgImagePosition: {
    type: String,
    default: 'center'
  }
})

const cardStyle = computed(() => ({
  background: props.bgColor
}))

const bgImageStyle = computed(() => ({
  backgroundImage: `url(${props.bgImage})`,
  backgroundPosition: props.bgImagePosition,
  backgroundSize: 'cover'
}))
</script>

<style lang="scss" scoped>
.anime-index-card {
  width: 280px;
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;



  &:hover {
    // transform: translateY(-5px);
    // box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);

    .card-overlay {
      // opacity: 0.8;
    }
  }

  .card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: v-bind('props.gradient');
    z-index: 2;
    transition: opacity 0.3s ease;
  }

  .card-content {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 16px;
  }

.card-header {
  display: flex;
  align-items: center;
  gap: 8px; // 控制标题和图标之间的间距

  h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    white-space: nowrap; // 防止标题换行
  }

  .more-icon {
    margin-left: 4px; // 微调图标与标题的距离
    font-weight: bold;
    font-size: 18px;
  }
}

      &:hover {
        opacity: 1;
      }
    }


  .stats-container {
    margin-top: auto;
  }

  .stats-row {
    display: flex;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .stat-item {
      flex: 1;
      text-align: center;

      .stat-label {
        font-size: 12px;
        opacity: 0.9;
        margin-bottom: 4px;
        // text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
      }

      .stat-value {
        font-size: 14px;
        font-weight: 600;
        // text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      }
    }
  }

</style>
